<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <!-- <el-row>
    <el-col :span="12"> </el-col>
    <el-col :span="12"
      >
    </el-col>
  </el-row> -->
  <!-- <el-card shadow="always" class="card" id="chartPie"></el-card> -->
  <el-card shadow="always" class="card" id="main"></el-card>
  <!-- <el-card shadow="always" class="thecard" id="chart"></el-card> -->
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'Vstatistics',
  data() {
    return {
      charts: '',
      numm: [],
    };
  },
  methods: {
    // 获取博客类型对应的数量
    // getTypeNum() {
    //   let token = localStorage.getItem("token");
    //   this.$http.get("/getTypeNum", token).then((res) => {
    //     if (res.statusCode == "200") {
    //       // 类型名称 res.data.x;
    //       // 类型数量 res.data.y;
    //       var getData = [];
    //       //先进行赋值
    //       for (let i = 0; i < res.data.x.length; i++) {
    //         var obj = new Object();
    //         obj.name = res.data.x[i];
    //         obj.value = res.data.y[i];
    //         getData[i] = obj;
    //       }
    //       this.numm = getData;
    //     }
    //   });
    // },

    drawPie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        //设置标题,副标题,以及标题位置居中
        title: {
          text: '疫苗种类库存占比',
          subtext: '(饼状图)',
          top: 20,
          x: 'center',
        },
        //具体点击某一项触发的样式内容
        tooltip: {
          trigger: 'item',
          //formatter: "{a} <br/>{b} : {c} ({d}%)"
          formatter: '{b} : {c} ({d}%)',
        },
        //左上侧分类条形符
        // legend: {
        //   orient: "vertical",
        //   x: "left",
        //   data: this.opinion,
        // },
        //饼状图类型以及数据源
        series: [
          {
            name: '统计数量',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: [
              { value: 1048, name: '减毒疫苗' },
              { value: 735, name: '灭活疫苗' },
              { value: 580, name: '核酸疫苗' },
              { value: 484, name: '亚单位疫苗' },
              { value: 484, name: '病毒样颗粒疫苗' },
              { value: 300, name: '病毒载体疫苗' },
            ],
            //data: this.numm,
            //设置饼状图扇形区域的样式
          },
        ],
      });
    },
    drawPieChart() {
      this.chartPie = echarts.init(document.getElementById('chartPie'));
      this.chartPie.setOption({
        title: {
          text: '数据库柱状图',
          x: 'center',
        },
        //具体点击某一项触发的样式内容
        tooltip: {
          trigger: 'item',
        },
        xAxis: {
          type: 'category',
          data: [
            '用户数量',
            '接种数量',
            '预约数量',
            '公告数量',
            '论坛数量',
            '评论数量',
          ],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110],
            type: 'bar',
          },
        ],
      });
    },
    drawChart() {
      this.chartPie = echarts.init(document.getElementById('chart'));
      this.chartPie.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ['Evaporation', 'Precipitation', 'Temperature'],
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: 'Precipitation',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} ml',
            },
          },
          {
            type: 'value',
            name: 'Temperature',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} °C',
            },
          },
        ],
        series: [
          {
            name: 'Evaporation',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              },
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
          },
          {
            name: 'Precipitation',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              },
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
          },
          {
            name: 'Temperature',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' °C';
              },
            },
            data: [
              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
            ],
          },
        ],
      });
    },
  },

  //调用
  mounted() {
    //this.getTypeNum(),
    //如果数据同时调用时，可能会因为数据加载不完全就渲染图表，会引发报错，因此可以使用setTimeout进行延时处理
    setTimeout(() => {
      this.$nextTick(function () {
        this.drawPie('main');
        this.drawPieChart();
        this.drawChart();
      });
    }, 500);
  },
};
</script>
<style scoped>
.card {
  height: 85vh;
  width: 90%;
  margin: auto;
  margin-top: 10px;
}
.thecard {
  height: 500px;
  width: 95%;
  margin: auto;
  margin-top: 10px;
}
</style>
